<template>
  <div>
    <a-button @click="fiveIsShow1">haveFive</a-button>
    <a-button @click="fiveIsShow2">noFive</a-button>
    <a-table
      :columns="tableColumns"
      :data-source="data"
      :scroll="{ x: 1500, y: 300 }"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'">
          <a>action</a>
        </template>
      </template>
    </a-table>
    <a-row type="flex">
      <a-col v-for="(item,index) in nameArr" :key="index" :span="6">
        <a-row>
          <a-col :span="8" class="height-100" :style="{background:'#bfc'}">{{ item.name }}</a-col>
          <a-col :span="16" class="height-100" :style="{background:'skyblue'}">{{ 1 }}</a-col>
        </a-row>
        
      </a-col>
    </a-row>

    <a-form>
      <a-form-item label="申请日期">
          {{ 'content.createTime' }}
        </a-form-item>
        <a-form-item label="复位设备">
          {{ 'content.equipmentName' }}
        </a-form-item>
        <a-form-item label="申请医生">
          {{ 'content.doctorAccountName' }}
        </a-form-item>
        <a-form-item label="计划名称">
          {{ 'content.planName' }}
        </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import type { TableColumnsType } from "ant-design-vue";
import { watch, ref, inject } from "vue";
import { useRoute } from "vue-router";

const menuData: any = inject("menuData");
const menuDataNofive: any = inject("menuDataNofive");
const columns: TableColumnsType = menuData;

const tableColumns = ref(columns);

const fiveIsShow1 = () => {
  router.push("/index/table?id=1");
};
const fiveIsShow2 = () => {
  router.push("/index/table?id=2");
};

const route: any = useRoute();
const nameArr :any[]=[{name:'小阳人'},{name:'小阴人'},{name:'小黄人'},{name:'绿巨人'}]

watch(
  () => route.query,
  (newVal, oldVal) => {
    if (newVal.id === "2") {
      tableColumns.value = menuDataNofive;
    } else if (newVal.id === "1") {
      tableColumns.value = menuData;
    }
  },
  { deep: true }
);

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
}

const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
</script>

<style lang="less">
.height-100{
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.height-50{
  height: 50px;
  line-height: 50px;
}
</style>
